<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>意见反馈</title>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div class="page">
    <!-- 标题栏 -->
    <header class="bar bar-nav">
        <a class="icon iconfont c-white pull-left" onclick="javascript:api.closeWin();">&#xe61f;</a>
        <!--<a class="icon icon-refresh pull-right"></a>-->
        <h1 class="title">意见反馈</h1>
    </header>
    <div class="content modify-password bg-default my-resume my-advise">
        <!--头部-->
        <!--<div class="head-no-toolbar bg-self-green no-left-icon">-->
            <!--<span class="icon iconfont c-white p-l" onclick="javascript:closeWin()">&#xe61f;</span>-->
            <!--<span class="c-white t-center">关于百马树教育</span>-->
        <!--</div>-->
        <!--内容区-->
        <div class="content-block">
            <div class="list-block m-t-0">
                <form id="advise_form" action="">
                    <input type="hidden" name="advise_id"/>
                    <table>
                        <tr>
                            <td>用户名</td>
                            <td>
                                <input id="stu-name" type="text" placeholder="请输入用户名"/>
                            </td>
                        </tr>
                        <tr>
                            <td>手机号</td>
                            <td>
                                <input id="stu-phone" type="tel" placeholder="请输入手机号"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">添加图片</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="add-img-td" style="padding-bottom:0;">
                                <div class="wrap">

                                    <!--<div class="item-img">-->
                                        <!--<div class="img-wrap">-->
                                        <!--<img src="../images/portrait.jpg" alt=""/>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                    <div class="item-img add-img">
                                        <div class="img-wrap clearfix">
                                            <div class="left pos-rel">
                                                <span class="icon icon iconfont icon-paizhao"></span>
                                                <div>拍照 </div>
                                            </div>
                                            <div class="right pos-rel">
                                                <div>图库</div>
                                                <span class="icon icon iconfont icon-tuku"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">问题描述</td>

                        </tr>
                        <tr>
                            <td colspan="2" class="pos-rel">
                                <textarea style="min-height:3rem;" class="c-gray" id="setArea1" name="personal_profile" placeholder="请输入问题描述(必填)"></textarea>
                            <span class="wordWrap">
                                <var class="word word1">0</var>&nbsp;/&nbsp;<var class="wordMax"></var>
                            </span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">意见反馈</td>

                        </tr>
                        <tr>
                            <td colspan="2" class="pos-rel">
                                <textarea style="min-height:7rem;" class="c-gray" id="setArea2" name="personal_profile" placeholder="请输入意见(非必填)"></textarea>
                            <span class="wordWrap">
                                <var class="word word2">0</var>&nbsp;/&nbsp;<var class="wordMax"></var>
                            </span>
                            </td>
                        </tr>
                    </table>
                    <div class="content-block">
                        <div class="row">
                            <div class="col-100">
                                <a id="send_btn" href="javascript:void(0);" class="button button-big button-fill button-success">提交</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    apiready=function(){
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });
        //使每一个缩略图的高宽相等
        $(document).ready(function(){
            $(".item-img").css("height",$(".item-img").width()+10+"px");
        });
        // 实时计算剩余字数函数
        function textareaNum(textareaNode, numNode, max) {
            var area = $(textareaNode)
            var numNode = $(numNode);
            area.attr('maxlength', max);
            numNode.next().text(max);
            area.on('input propertychange', function () {
                var _value = $(this).val().replace(/\n/gi, "");
                numNode.text(_value.length);
            });
        }
        // 调用计算字数函数
        textareaNum("#setArea1", ".my-advise .word1", 90);
        textareaNum("#setArea2", ".my-advise .word2", 120);

        //点击上传图片缩略图 添加删除按钮
        $(".my-advise").on("click",".img-wrap",function(){
            if($(this).find("img").length==1){
                if($(this).find(".img-close").length==0){
                    $(this).css("border-color","#ec9d9d")
                            .append('<div class="img-close">\
                        <span class="icon iconfont icon-guanbi"></span>\
                    </div>');
                }else{
                    $(this).css("border-color","#e7e7e7")
                            .find(".img-close").remove();
                }
            }
        });

        //点击删除按钮 删除当前 缩略图
        $(".my-advise").on("click",".img-close",function(){
            $(this).parents(".item-img").detach();
            addImageFlag=false;
        });



        if(isLogin()){

            var stuInfo=getLoginStudentInfo();
            var stuName=stuInfo.STUDENT_NAME;
            var stuPhone=stuInfo.MOBILE_PHONE;

            if(!isEmpty(stuName)){
                $("#stu-name").val(stuName);
                $("#stu-name").attr('disabled',true);
            }

            if(!isEmpty(stuPhone)){
                $("#stu-phone").val(stuPhone);
                $("#stu-phone").attr('disabled',true);
            }
        }

        //是否已添加图片
        var addImageFlag=false;

        //提交
        $("#send_btn").click(function(){

            sendAdvise();

        });

        //提交意见反馈
        function sendAdvise(){
            var stuName=$("#stu-name").val();
            var stuPhone=$("#stu-phone").val();
            var imgUrl=$(".my-advise .wrap img:eq(0)").attr("src");
            var question=$("#setArea1").val();
            var advise=$("#setArea2").val();

            if(getstrlength(stuName)==0){

                toast("请输入用户名");
                return;
            }

            if(getstrlength(stuPhone)==0){
                toast("请输入手机号");
                return;
            }

            if(!checkPhoneNumber(stuPhone)){
                toast("手机号格式不正确");
                return;
            }

            if(isEmpty(imgUrl)){
                toast("请选择一张图片");
                return;
            }

            if(getstrlength(question)==0){

                toast("请输入问题描述");
                return;
            }

            var uuid=getUUID();
            var sql="INSERT INTO su_feedback (FEEDBACK_ID,APP_NAME,PROBLEM_DESC,OPINION,ATTACH_FILE,SUBMIT_DATE,SUBMIT_NAME,SUBMIT_PHONE, PROCESS_STATE) VALUES('{0}','百马树','{1}','{2}','{3}','{4}','{5}','{6}','0')";
            uploadAdviseImage(stuPhone,imgUrl,uuid,true,function(ret, err, remotePath){

                if (isObject(ret) && (ret.statusCode == 0)){
                    var imgPath=ret.result;
                    dbExecute(sql.format(uuid,question,advise,imgPath,getCurrTime(),stuName,stuPhone),true,function(ret,err){

                        if (isObject(ret) && (ret.statusCode == 0)) {

                            toast("提交成功");

                            $("#setArea1").val("");
                            $("#setArea2").val("");
                            $(".word1").text("0");
                            $(".word2").text("0");

                            $(".my-advise").find(".item-img").not('.item-img:last').detach();
                            addImageFlag=false;
                        }else{
                            toast("提交失败");
                        }


                    });

                }else{

                    toast("提交失败");
                }


            });
        }


        //点击添加图片(拍照)
        $(".my-advise").on("click",".icon-paizhao",function(){
            if(!addImageFlag){
                getImage("camera");
            }else{
                toast("只能添加一张图片");
            }
        });
        //点击添加图片(图库)
        $(".my-advise").on("click",".icon-tuku",function(){
            if(!addImageFlag){
                getImage("library");
            }else{
                toast("只能添加一张图片");
            }
        });


        function getImage(type){
            getPicture(0,0,type,function(ret,err){
                if (isObject(ret)) {
                    var url = ret.data;
                    if(isNotEmpty(url)){
                        addImageFlag=true;

                        $(".add-img-td .wrap").prepend('<div class="item-img">\
                                                            <div class="img-wrap">\
                                                            <img src=' + url + ' alt=""/>\
                                                            </div>\
                                                       </div>')
                                .find(".item-img").css("height", $(".add-img").css("height"));
                    }

                }
            });
        }
    };

</script>
</body>
</html>
